<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem>菜品管理</BreadcrumbItem>
      <BreadcrumbItem>菜品分类</BreadcrumbItem>
    </Breadcrumb>
    <!-- 卡片 -->
    <Card>
      <Row>
        <Col span="9">
          <Input search enter-button placeholder="请输入分类名称" size="large" />
        </Col>
        <Col>
          <Button type="primary" size="large" @click="add()">添加分类</Button>
          <Button type="success" size="large" @click="exportData()">
            <Icon type="ios-download-outline"></Icon>一键导出
          </Button>
        </Col>

        <!-- table -->
        <Table border :columns="columns1" :data="data1" stripe ref="table">
          <template slot-scope="{ row }" slot="age">
            <strong>{{ row.age }}岁</strong>
          </template>
          <template slot-scope="{ row }" slot="status2">
            <i-switch
              v-model="row.status2"
              true-value="1"
              false-value="0"
              true-color="#13ce66"
              false-color="#ff4949"
            />
          </template>
          <template slot-scope="{ row }" slot="vip">
            <Tag :color="row.vip == '是' ? 'primary' : 'error'">{{row.vip}}</Tag>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="show(row)"
              icon="md-create"
            >编辑</Button>
            <Button type="error" size="small" @click="remove(index)" icon="md-trash">删除</Button>
          </template>
        </Table>
        <Page
          :total="total"
          show-total
          show-elevator
          show-sizer
          :current="personInit.page"
          :page-size="personInit.page_size"
          @on-change="handleCurrentChange"
          @on-page-size-change="handleSizeChange"
        />
      </Row>
    </Card>
    <!-- 添加分类 -->
    <Modal
      v-model="modal2"
      width="800"
      title="添加分类"
      @on-ok="addok"
      @on-cancel="addcancel"
      draggable
      :footer-hide="true"
    >
      <Form
        ref="addformValidate"
        :model="addformValidate"
        :rules="addruleValidate"
        :label-width="80"
      >
        <FormItem label="Name" prop="name">
          <Input v-model="addformValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="mail">
          <Input v-model="addformValidate.mail" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="City" prop="city">
          <Select v-model="addformValidate.city" placeholder="Select your city">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>
        <FormItem label="Date" prop="date">
          <DatePicker type="date" placeholder="Select date" v-model="addformValidate.date"></DatePicker>
        </FormItem>
        <FormItem label="Time" prop="time">
          <TimePicker type="time" placeholder="Select time" v-model="addformValidate.time"></TimePicker>
        </FormItem>
        <FormItem label="Gender" prop="gender">
          <RadioGroup v-model="addformValidate.gender">
            <Radio label="male">Male</Radio>
            <Radio label="female">Female</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="Hobby" prop="interest">
          <CheckboxGroup v-model="addformValidate.interest">
            <Checkbox label="Eat"></Checkbox>
            <Checkbox label="Sleep"></Checkbox>
            <Checkbox label="Run"></Checkbox>
            <Checkbox label="Movie"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="Desc" prop="desc">
          <Input
            v-model="addformValidate.desc"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="Enter something..."
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="addhandleSubmit('addformValidate')">提交</Button>
          <Button @click="addhandleReset('addformValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </Modal>
    <!-- 编辑分类 -->
    <Modal
      v-model="modal1"
      width="800"
      title="编辑分类"
      @on-ok="ok"
      @on-cancel="cancel"
      draggable
      :footer-hide="true"
    >
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Name" prop="name">
          <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="mail">
          <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="City" prop="city">
          <Select v-model="formValidate.city" placeholder="Select your city">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>
        <FormItem label="Date" prop="date">
          <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
        </FormItem>
        <FormItem label="Time" prop="time">
          <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
        </FormItem>
        <FormItem label="Gender" prop="gender">
          <RadioGroup v-model="formValidate.gender">
            <Radio label="male">Male</Radio>
            <Radio label="female">Female</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="Hobby" prop="interest">
          <CheckboxGroup v-model="formValidate.interest">
            <Checkbox label="Eat"></Checkbox>
            <Checkbox label="Sleep"></Checkbox>
            <Checkbox label="Run"></Checkbox>
            <Checkbox label="Movie"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="Desc" prop="desc">
          <Input
            v-model="formValidate.desc"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="Enter something..."
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      personInit: {
        page: 1,
        page_size: 20
      },
      total: 100,
      columns1: [
        {
          title: '#',
          align: 'center',
          type: 'index'
        },
        {
          title: 'Name',
          align: 'center',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age',
          align: 'center',
          slot: 'age'
        },
        {
          title: 'Address',
          align: 'center',
          key: 'address'
        },
        {
          title: 'Status2',
          align: 'center',
          slot: 'status2',
          key: 'status2'
        },
        {
          title: '是否VIP',
          align: 'center',
          slot: 'vip',
          key: 'vip'
        },
        {
          title: 'Action',
          slot: 'action',
          width: 250,
          align: 'center',
          key: 'action'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          status2: '1',
          vip: '否',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          status2: '1',
          vip: '是',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          status2: '1',
          vip: '是',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          status2: '0',
          vip: '是',
          date: '2016-10-04'
        }
      ],
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      addformValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      addruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          { required: true, message: 'Please select the city', trigger: 'change' }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
          { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
        ],
        date: [
          { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
        ],
        time: [
          { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
        ],
        desc: [
          { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
          { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
        ]
      },
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          { required: true, message: 'Please select the city', trigger: 'change' }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
          { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
        ],
        date: [
          { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
        ],
        time: [
          { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
        ],
        desc: [
          { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
          { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 页码改变的事件
    handleCurrentChange (val) {
      this.personInit.page = val
    },
    // 当每页显示条数改变时
    handleSizeChange (val) {
      this.personInit.page_size = val
    },
    // 点击编辑按钮
    show (row) {
      console.log(row)
      this.modal1 = true
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: '菜品分类',
        original: false
      })
    },
    // 点击删除按钮
    remove (row) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '<p>您确定要删除当前人员信息吗？</p>',
        onOk: () => {
          this.$Message.success('删除成功')
        },
        onCancel: () => {
          this.$Message.info('您取消了删除')
        }
      })
    },
    ok () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          return this.$Modal.error('fail')
        }
      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.modal1 = false
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 点击编辑按钮
    add () {
      this.modal2 = true
    },
    addok () {
      this.$Message.info('Clicked ok')
    },
    addcancel () {
      this.$Message.info('Clicked cancel')
    },
    addhandleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.modal2 = false
          this.$Message.error('Fail!')
        }
      })
    },
    addhandleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
